<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
  <style>
    a{
      font-size: 30px;
    }
  </style>
</head>
<body>
<h1>请按下按键</h1>
  <div>
    <ul>
      <li><a id="a1">keypress:按键盘时触发</a></li>
      <li><a id="a2">keydown:按键按下时触发</a></li>
      <li><a>keyup:按键弹起时触发</a></li>
    </ul>
  </div>

  <script>
     // var key=document.querySelectorAll('a');
     console.log('script loaded');
     var a1=document.getElementById('a1');
     console.log('获取a1:'+a1.innerText);
     var a2=document.getElementById('a2');
     console.log('获取a2:'+a2.innerText);
     var div=document.querySelector('div');
     console.log('获取div'+div.innerHTML);
     window.onkeypress=function (){
       console.log('pressed');
       a1.style.backgroundColor='blue';
       a1.style.color='white';
     }

     window.onkeydown=function (){
       div.innerText='当前按下';
       a2.style.backgroundColor='blue';
       a2.style.color='white';
     }

     window.onkeyup=function (){
       div.innerText='当前松开';
       a2.style.backgroundColor='white';
       a2.style.color='black';
     }
  </script>
</body>
</html>